<template>
  <Popup v-model:show="showModal" :title="props.title || '车系'" @scrolltolower="loadPagingMore" canceltext="清空选项"
    @refresherrefresh="initPagingQuery" openrefresher :refresher="pagingInfo.loading" @submit="onSubmit" @cancel="onCancel">
    <view class="series-list">
      <view :class="`series-item ${paramsInfo.seriesId === itm.id && 'series-active'}`" v-for="(itm) in pagingInfo.list" @click="paramsInfo.seriesId = itm.id"
        :key="itm.id">
        <view class="item-count">{{ itm.series_name }}</view>
      </view>
      <!-- <view class="series-item series-active">
        <view class="item-count"> 5系 Li</view>
      </view> -->
    </view>
    <NoData :list="pagingInfo.list" title="暂无数据" :loading="pagingInfo.loading" :total="pagingInfo.total" />
  </Popup>
</template>

<script setup>
import { watch, ref } from "vue"
import Popup from "@/components/ui/popup"
import { useShowModal } from "@/path/hooks/v-model"
import NoData from "@/components/tool/no-data"
import service from "@/path/service"
import { usePagingQuery } from "@/path/hooks";
import { debounce } from "@/path/until";
const props = defineProps({
  show: Boolean,
  title: String,
  name: String,
  params: Object,
})
const emit = defineEmits(['update:show', 'update:params', 'update:name'])
const { showModal } = useShowModal(props, emit)
function getList(params) {
  return service.get("api/ycg/car/series", params)
}

const { pagingInfo, initPagingQuery, loadPagingMore } = usePagingQuery(getList, {
  pageSize: 20,
})
initPagingQuery()


const paramsInfo = ref(props?.params || {})
watch(() => props?.params, () => {
  paramsInfo.value = { ...(props?.params || {}) };
}, { immediate: true, deep: true });
function onSubmit() {
  emit("update:params", { ...paramsInfo.value });
  const _item = (pagingInfo.list || []).find(v => v.id === paramsInfo.value.seriesId)
  emit("update:name", _item.series_name);
}
function onCancel() {
  emit("update:params", null);
  emit("update:name", "");
}
</script>

<style lang="less" scoped>
.series-list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;

  .series-item {
    width: 33.333%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 32rpx;

    .item-count {
      width: 192rpx;
      height: 80rpx;
      background-color: #F7F7F7;
      border-radius: 32rpx;
      font-weight: 400;
      font-size: 32rpx;
      color: #999999;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    &.series-active {
      .item-count {
        background-color: #9CDB14;
        font-weight: 700;
        color: #FFFFFF;
      }
    }
  }
}
</style>
